<!--
 * @Author: zl
 * @Date: 2021-02-05 14:52:13
 * @LastEditTime: 2021-11-30 18:49:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\layoutpages\system\Roles.vue
-->
<template>
    <div class="ve_container">
        <!-- 搜索 -->
        <el-form ref="queryForm" :inline="true" :model="params">
            <el-form-item label="店铺名称" prop="storeCode">
                <el-select clearable v-model="storeCode" placeholder="请选择">
                    <el-option
                        v-for="item in payStores"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="预定时间" prop="subscribeTime">
                <el-date-picker
                    style="width: 100%"
                    v-model="subscribeTime"
                    type="date"
                    placeholder="选择结束时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onSubmit(params, getDataList)"
                >
                    {{ menus.search.name }}
                </el-button>
                <el-button @click="resetForm(queryForm, params, getDataList)">
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <ve-table
            :table="{
                data: tableData,
            }"
            :pagination="{
                onSizeChange: (val) =>
                    handleSizeChange(val, params, getDataList),
                onCurrentChange: (val) =>
                    handleCurrentChange(val, params, getDataList),
                currentPage: page,
                pageSize: pageSize,
                total: total,
            }"
        >
            <template #tool_bar>
                <el-button
                    v-permission="['add']"
                    size="mini"
                    type="primary"
                    @click="handleEdit(menus.add.name)"
                >
                    {{ menus.add.name }}
                </el-button>
            </template>
            <el-table-column prop="storeCode" label="店铺名称">
                <template v-slot="{ row }">
                    <el-tag>
                        {{
                            payStores.filter(
                                (item) => item.code == row.storeCode
                            )[0].name
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="userInfo" label="用户名称">
                <template v-slot="{ row }">
                    {{ JSON.parse(row.userInfo).name }}
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
            ></el-table-column>
            <el-table-column
                prop="subscribeTime"
                label="预定日期"
            ></el-table-column>
            <el-table-column prop="goods" label="商品信息">
                <template v-slot="{ row }">
                    <div
                        v-html="
                            row.goods != undefined &&
                            showGoods(JSON.parse(row.goods))
                        "
                    ></div>
                </template>
            </el-table-column>
            <el-table-column prop="payNum" label="商品金额"></el-table-column>
            <el-table-column prop="status" label="预约状态">
                <template v-slot="{ row }">
                    <el-tag>
                        {{
                            yyzt.filter((item) => item.code == row.status)[0]
                                .name
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <!--<el-table-column fixed="right" label="操作" width="150px">
              <template v-slot:default="{ row }">
                  <el-button
                      v-permission="['edit']"
                      @click.prevent="handleEdit(menus.edit.name, row)"
                      type="primary"
                      size="mini"
                  >
                      {{ menus.edit.name }}
                  </el-button>
                  <el-button
                      v-permission="['del']"
                      @click.prevent="handleDel(row.id)"
                      type="danger"
                      size="mini"
                  >
                      {{ menus.del.name }}
                  </el-button>
              </template>
          </el-table-column>-->
        </ve-table>
    </div>
</template>
<script>
export default {
    data: () => ({
        description: "预约信息表",
        menus: {
            search: { name: "查询" },
            add: { name: "添加" },
            edit: { name: "编辑" },
            del: { name: "删除" },
        },
    }),
};
</script>

<script setup>
import { reactive, toRefs, ref, onMounted } from "vue";
//*导入公共查询方法
import {
    onSubmit,
    resetForm,
    handleSizeChange,
    handleCurrentChange,
} from "@/views/layoutpages/common";

const rowData = ref(null);
const dialogTitle = ref("");
const showDialog = ref(false);
const queryForm = ref(null);
const tableData = ref([]);
const payStores = ref([]);
const yyzt = ref([]);
const spdw = ref([]);
const params = reactive({
    pageSize: 10,
    page: 1,
    total: 0,
    storeCode: null,
    subscribeTime: null,
});
const { storeCode, pageSize, page, total, subscribeTime } = toRefs(params);

const showGoods = (goods) => {
    let good = "";
    goods.forEach((item) => {
        good +=
            "<pre>" +
            item.goodsName +
            "(<span style='color: red;font-weight:bolder;font-size: 20px'>" +
            item.goodsCount +
            showGoodsType(item.goodsType) +
            "</span>)" +
            "</pre>";
    });
    return good;
};
const showGoodsType = (type) => {
    return spdw.value.filter((item) => item.code == type)[0].name;
};
/**
 * @description: 获取店铺类型
 * @param {*}
 * @return {*}
 */
const getPayStores = async (userId) => {
    const { code, data } = await VE_API.system.payStores();
    if (code == "00") {
        payStores.value = data;
    }
    payStores.value = data;
};

/**
 * @description: 获取字典项类型
 * @param {*}
 * @return {*}
 */
const getDicList = async (dicCode) => {
    const { code, data } = await VE_API.system.dictionaryEntityByCode({
        dicCode: dicCode,
    });
    if (code == "00") {
        if (dicCode == "yyzt") {
            yyzt.value = data;
        } else {
            spdw.value = data;
        }
    }
};

/**
 * @description:添加or编辑事件
 * @param {*}
 * @return {*}
 */
const handleEdit = (title, row = null) => {
    showDialog.value = true;
    dialogTitle.value = title;
    rowData.value = row;
};

/**
 * @description: 获取列表数据
 * @param {*}
 * @return {*}
 */
const getDataList = async () => {
    const { code, data } = await VE_API.system.paySubscribeList(params);
    if (code == "00") {
        const { pageSize, pageNum, total, list } = data;
        params.pageSize = pageSize;
        params.page = pageNum;
        params.total = total;
        tableData.value = list;
    }
};
onMounted(async () => {
    await getPayStores();
    await getDicList("yyzt");
    await getDicList("spdw");
    await getDataList();
    // maxHeight(pagination, queryForm, toolBar, ve_max_height);
});
</script>

<style lang="scss" scoped></style>
